<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" v-if="route.query.showReturn">
        <el-form ref="queryRef" :inline="true"  label-width="150px">
          <el-form-item>
            <el-button
                type="primary"
                plain
                icon="Back"
                @click="handleReturn"
            >返回</el-button>
          </el-form-item>
          <el-form-item label="上湾皮带秤生产日报" prop="choiceDate">
            <el-date-picker
                v-model="choiceDate"
                @change="changeDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
                size="default"
                :disabled-date="disabledDate"
            />
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" class="card-box"  v-for="(daily,index) in dailyList" :key="index">
        <el-card>
          <h2 style="line-height:50%;">{{ daily.deviceName }}</h2>
          <p>
            <span>{{ '带速：' + emptyIsZero(daily.speed) +'米/秒，'}}</span>
            <span>{{ '物料密度：' + emptyIsZero(daily.density) +'吨/立方米'}}</span>
            <br/>
            <span>{{ '当日累计流量：'+ emptyIsZero(daily.currentDayFlow) +'吨，' }}</span>
            <span>{{ '体积：'+ emptyIsZero(daily.currentDayVolume) +'立方米' }}</span>
            <br/>
            其中：
            <br/>
            <span>{{ '早班：' + emptyIsZero(daily.currentMorningFlow) +' 吨' }}</span>
            <br/>
            <span>{{ '中班：' + emptyIsZero(daily.currentNoonFlow) +' 吨' }}</span>
            <br/>
            <span>{{ '晚班：' + emptyIsZero(daily.currentNightFlow) +' 吨' }}</span>
          </p>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="Daily">
import { listDaily } from "@/api/coal/daily";

const { proxy } = getCurrentInstance();
const route = useRoute();

const choiceDate = ref(getDay(-1,'-'));
const dailyList = ref([]);

onMounted(() => {
  getList()
})

/** 查询简报列表 */
function getList() {
  proxy.$modal.loading("正在加载简报数据，请稍候！");
  listDaily(choiceDate.value).then(response => {
    proxy.$modal.closeLoading();
    dailyList.value = response.data;
  }).catch(err => {
    proxy.$modal.closeLoading();
  });
}

function changeDate(val){
  proxy.$modal.loading("正在加载简报数据，请稍候！");
  listDaily(val).then(response => {
    proxy.$modal.closeLoading();
    dailyList.value = response.data;
  });
}

function emptyIsZero(data){
  if (data === '' || data === null || data === 'null' || data === undefined){
    return 0
  } else {
    return data
  }
}

function getDay(num, str) {
  let today = new Date();
  let nowTime = today.getTime();
  let ms = 24*3600*1000*num;
  today.setTime(parseInt(nowTime + ms));
  let oYear = today.getFullYear();
  let oMoth = (today.getMonth() + 1).toString();
  if (oMoth.length <= 1) oMoth = '0' + oMoth;
  let oDay = today.getDate().toString();
  if (oDay.length <= 1) oDay = '0' + oDay;
  return oYear + str + oMoth + str + oDay;
}
function handleReturn(){
  const obj = { path: "/coalflow/craft" };
  proxy.$tab.closeOpenPage(obj);
}

function disabledDate(time){
  let current = new Date();
  current.setDate(current.getDate()-1)
  return time.getTime() > current.getTime()
}


</script>
